import { data } from "./defaultValue"
export const desigerAttributes = [
  {
    param: "value / v-model",
    remark: "为表单编辑器生成的动态表单数据转换的JSON字符串",
    type: "String",
    value: "-",
  },
  // {
  //   param: "form",
  //   remark: "为包含表单组件对应的key和value",
  //   type: "Object",
  //   value: "-",
  // },
  // {
  //   param: "enabled",
  //   remark: "在表单画板处，编辑器控件是否可以交互操作",
  //   type: "Boolean",
  //   value: "false",
  // }, {
  //   param: "hideSaveBtn",
  //   remark: "隐藏保存按钮",
  //   type: "Boolean",
  //   value: "false",
  // },
  // {
  //   param: "defaultComs",
  //   remark: "表单编辑器组件库",
  //   type: "Object",
  //   value: "-",
  // },
]

export const desigerMethods = [
  {
    method: 'validate',
    remark: '对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个个参数：校验是否通过、校验提示语',
    param: 'Function(callback: Function(Boolean,Array))'
  },
  {
    method: 'submit',
    remark: '对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值',
    param: 'Function(callback: Function(object))'
  },
]

export const desigerEvents = [
  {
    event: 'save',
    remark: '点击保存按钮触发',
    param: '新状态的value值，新状态的组件列表，新状态的表单属性'
  },
  {
    event: 'change',
    remark: '数据更改触发',
    param: '新状态的value值'
  },
]

export const desigerCode =
  `<template>
  <FGDesigner v-model="formConf" @save="handleSave" @change="handleChange"/>
</template>

<script>
export default {
  data() {
    return {
      formConf: {},
    };
  },
  methods: {
    handleSave(form) {
      console.log("数据发布：",form)
    },
    handleChange(form) {
      console.log("数据更新：",form)
    }
  }
};
</script> `

export const formAttributes = [
  {
    param: "value / v-model",
    remark: "为表单编辑器生成的动态表单数据转换的JSON字符串",
    type: "String",
    value: "-",
  },
  {
    param: "form",
    remark: "为包含表单组件对应的key和value",
    type: "Object",
    value: "-",
  },
]

export const formMethods = [
  {
    method: 'validateForm',
    remark: '对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入三个参数：校验是否通过、表单的form值、表单的value值',
    param: 'Function(callback: Function(valid, form, value))'
  },
  // {
  //   method: 'submitForm',
  //   remark: '对整个表单进行提交的方法，参数为一个回调函数。传入一个参数：即为已修改的value值',
  //   param: 'Function(callback: Function(object))'
  // },
  { method: 'resetForm', remark: '对整个表单进行重置，将所有字段值重置为初始值', param: '-' },
]

export const pcFormCode =
  `<template>
  <FGPcForm ref="FGPcForm" v-model="data"  />
  <div style="text-align: center">
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '${JSON.stringify(data)}',
    };
  },

  methods: {
    submitForm() {
      this.$refs["FGPcForm"].validateForm((valid, form) => {
        if (valid) {
          // 表单校验通过  
        } else {
          console.log("表单校验失败");
        }
      });
    },
    resetForm() {
      this.$refs["FGPcForm"].resetForm();
    },
  },
};
</script> `

export const phoneFormCode =
  `<template>
  <FGPhoneForm ref="FGPhoneForm" v-model="form" />
  <div style="margin: 16px">
    <van-button round block type="info" @click="submitForm"
      >提交</van-button
    >
    <van-button round plain block  style="margin-top: 15px" type="info" @click="resetForm"
      >重置</van-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '${JSON.stringify(data)}',
    };
  },

  methods: {
    submitForm() {
      this.$refs["FGPhoneForm"].validateForm((valid, form) => {
        if (valid) {
          // 表单校验通过  
        } else {
          console.log("表单校验失败");
        }
      });
    },
    resetForm() {
      this.$refs["FGPhoneForm"].resetForm();
    },
  },
};
</script> `

export const showAttributes = [
  {
    param: "value",
    remark: "为表单编辑器生成的动态表单数据转换的JSON字符串",
    type: "String",
    value: "-",
  },
  {
    param: "form",
    remark: "为包含表单组件对应的key和value",
    type: "Object",
    value: "-",
  },
]

export const pcShowCode =
  `<template>
  <FGPcShow :value="data" />
</template>
<script>
export default {
  data() {
    return {
      data: '${JSON.stringify(data)}',
    };
  },
};
</script>`

export const phoneShowCode =
  `<template>
  <FGPhoneShow :value="data" />
</template>
<script>
export default {
  data() {
    return {
      data: '${JSON.stringify(data)}',
    };
  },
};
</script>`

export const formTable = [
  { param: 'formRef', required: '是', remark: '表单名' },
  { param: 'formModel', required: '是', remark: '表单模型' },
  { param: 'formRules', required: '是', remark: '校验模型	' },
  { param: 'size', required: '否', remark: '表单尺寸' },
  { param: 'labelPosition', required: '否', remark: '标签对齐	' },
  { param: 'labelWidth', required: '否', remark: '标签宽度' },
  { param: 'gutter', required: '是', remark: '栅格间隔' },
  { param: 'disabled', required: '是', remark: '是否禁用表单	' },
  { param: 'unFocusedComponentBorder', required: '是', remark: '是否显示未选中组件边框' },
  { param: 'list', required: '是', remark: '用于存放组件配置参数	' },

]

export const configTable = [
  { param: '__config__.layout', required: '否', remark: '组件使用的布局方式	colFormItem' },
  { param: '__vModel__', required: '是', remark: '表单字段的属性名，可自定义	系统自增' },
  { param: '__config__.defaultValue', required: '否', remark: '默认值；与__vModel__对应使用，可指定表单字段的默认值；可用于表单数据回填	' },
  { param: '__config__.tag', required: '是', remark: '组件名称	' },
  { param: '__config__.changeTag', required: '是', remark: '是否允许显示切换组件面板	' },
  { param: '__config__.tagIcon', required: '是', remark: '组件svg图标名称	' },
  { param: '__config__.label', required: '是', remark: '表单标题	' },
  { param: '__config__.showLabel', required: '是', remark: '是否显示表单标题	' },
  { param: '__config__.labelWidth', required: '是', remark: '表单标题区域宽度(px)	' },
  { param: '__config__.required', required: '是', remark: '是否要求表单校验	' },
  { param: '__config__.regList', required: '否', remark: '表单正则校验；赋值为数组时，显示配置项	' },
  { param: '__config__.span', required: '是', remark: '24栅格系统，表示组件的栅格数	' },
  { param: '__config__.layoutTree', required: '否', remark: '是否显示布局树，仅布局组件“行容器”存在	' },
  { param: '__config__.children', required: '否', remark: '子组件，仅布局组件“行容器”存在	' },
  { param: '其余属性', required: '否', remark: '根据不同组件的属性灵活配置。不同组件属性名称及作用与elementUI一致，可参考：<a href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank" type="primary" >https://element.eleme.cn/#/zh-CN/component/installation</a>' }
]


